/*****************************************************
*
*     Read me
*
******************************************************/
// Install yarn with 'yarn'
// Compile this less file with 'yarn compile'



/*****************************************************
*
*     Imports
*
******************************************************/


//
// UIKit Core
//
@import "../src/less/uikit.less";

//
// Stageone Customizings
//
@import "../../lib/css/so-uikit-config.less";
@import "../../lib/css/so-less-lib.less";
@import "../../lib/css/so-css-plugins.less";
@import "../../lib/css/so-template-base-styles.less";



/*****************************************************
*
*     Stageone Template
*
******************************************************/

//
// Phone portrait
//

a, .uk-link {
  .transition();
}

h1, .uk-h1, h2, .uk-h2 {
  .hyphens();
}

.uk-lightbox-toolbar {
  span {
    color:@color-b !important;
  }
}
.overlay-gradient-bottom {
  .tripleGradient();
}

.overlay-gradient-top {
  .tripleGradient(rgba(255,255,255,0.25), rgba(255,255,255,0.75), rgba(255,255,255,0.85), 0%, 33%, 100%, 0deg);
}

.uk-card-muted {
  background:@global-muted-background;
}

.uk-card-muted-light {
  background:lighten(@global-muted-background,4%);
  .custom-list-highlight {
    background-color:lighten(@global-muted-background,8%);
  }
}

.uk-card-hover {
  .uk-icon {
    .transition();
  }
}

.uk-card-hover {
  :hover {
    .uk-icon.color-b {
      color:@color-b;
    }
  }
}

.uk-text-lead {
  .fontMedium();
}

.uk-table-divider tr:first-child {
  td {
    padding-top:0 !important;
  }
}

.uk-button {
  .fontMedium();
  padding-top:8px;
  padding-bottom:8px;
}

.uk-button-default,
.uk-button-primary,
.uk-button-secondary {
  border:@global-medium-border-width solid @color-b;
  &:hover {
    border-color:@color-a;
  }
}

.uk-button-primary {
  border-color:@color-c;
}

.uk-light,
.uk-card-secondary,
.uk-background-secondary {

  .uk-button-default,
  .uk-button-primary,
  .uk-button-secondary {
    border:@global-medium-border-width solid @color-base-e;
    &:hover {
      border-color:@color-base-e;
    }
  }

  .uk-button-primary {
    border:@global-medium-border-width solid @color-c;
  }

  .uk-button-secondary {
    border:@global-medium-border-width solid @color-d;
    color:@color-b !important;
    &:hover {
      color:@color-b !important;
    }
  }

  a, .uk-link, a.uk-link-reset {
    color:@color-d !important;
    &:hover {
      color:@color-e !important;
    }
  }

}

.uk-modal-footer {
  li {
    margin-top:4px;
    margin-bottom:4px;
  }
}

.uk-button-text {
  padding-top:5px;
  padding-bottom:5px;
}

.uk-icon {
  vertical-align: 2px;
}

.uk-label {
  border:@global-border-width solid @color-c;
  .transition();
  &.large-label {
    padding: 3px 25px;
  }

  &.hover-label {
    &.uk-active, &:hover {
      background:@color-b;
      border-color:@color-b;
      color:@color-base-e !important;
    }
  }

  &.color-b-label {
    border:@global-border-width solid @color-b;
    color:@color-b;
  }
}

.custom-list-highlight {
  background-color:@color-base-e;
}

.hover-list {
  li {
    margin-top:0 !important;
    > div {
      border-top:@global-border-width solid @global-border !important;
      > a {
        padding-top:10px;
        padding-bottom:10px;

        padding-right:10px;
        padding-left:10px;
        .transition();

        &:hover {
          background-color:@color-d;
        }

      }
    }
  }
}

.uk-card-secondary {
  .hover-list {
    li {
      > div {
        > a {
          &:hover {
            background-color: lighten(@color-a,5%);
            color:@color-base-e;
          }
        }
      }
    }
  }
}


#main-navigation {
  li.level-1 {
    > a {
      .transition(all ease 0.2s);

      &.uk-open, &:hover  {
        background: @color-b;
        color: @color-base-e;
      }

    }

    &.starter_active {
      > a {
        background: @color-b;
        color: @color-base-e;
      }
    }

    li.level-2 {

      > a {
        padding-left:20px;
      }

      .level-3-menu {
        opacity: 0;
        visibility: hidden;
        background:lighten(@color-d,0%);

        .level-3 {
          a {
            color:@color-c !important;
            padding:0 20px;
            &:hover, &.active {
              color:@color-a !important;
            }

          }

        }

      }

      &:hover {
        background:lighten(@color-d,0%);
        > .level-3-menu {
          opacity: 1;
          visibility: visible;
          z-index:100;
        }
      }

      &.active {
        a {
          color:@color-base-e;
        }

        > .level-3-menu {
          opacity: 1;
          visibility: visible;
        }


        &:hover {
          a {
            color:@color-b;
          }
        }

      }

    }
  }
}

#mobile-navigation {
  li.level-1 {
    border-bottom:@global-border-width solid @global-border;
    padding-bottom:14px;
    > a {
      .transition(all ease 0.2s);
      color:@color-b;
      &:hover {
        color:@color-b;
      }
    }

    a.starter_active {
      .fontMedium();
    }

    li.level-2 {
      color:@color-b;
      a {
        color:@color-b;
      }
      &.active {
        a {
          color:@color-a;
          .fontMedium();
        }
      }

      li.level-3 {
        &.active {
          a {
            color:@color-a;
            .fontMedium();
          }
        }
        &.inactive {
          a {
            color: @color-b;
            .fontRegular();
          }
        }
      }

    }

  }

}

.switcher-icon {
  .transition();
  .rotate(180deg);
}

.level-1.uk-open {
  .switcher-icon {
    .rotate(0deg);
  }
}

.bubble-visible-m {
  &:before {
    display:none;
  }
}


.error-container {
  margin-top: 5px !important;
}

.uk-input.ipt-error {
  color:@color-danger;
}

.ipt-error-icon {
  color:@color-danger;
}

.live-search-input {
  height:30px;
}

.live-search-container {
  li {
    margin:0 !important;

    > div {

      > a {
        display:block;
        padding-top:10px;

        margin-left:-10px;
        margin-right:-10px;

        > span {
          padding-right:10px;
          padding-left:10px;
          margin-bottom:0 !important;
        }


        .transition();

        &:hover {
          background-color:@color-base-e;
        }

      }
    }
  }
}

.mobile-form-container {
  border-bottom:@global-border-width solid @global-border;
}


blockquote {
  font-size:1.1em;
  margin-left: 25px;

}

//
// Tablet portrait
//

@media (min-width: @breakpoint-small) {


}



//
// Tablet landscape
//
@media (min-width: @breakpoint-medium) {

  #logo {
    left:-48px;
    width:130px;
  }

  #first-header {
      padding-left:91px;
  }

  #second-header {
    padding-left:90px;
  }

  .bubble-visible-m {
    &:before {
      display:block;
    }
  }

  .uk-card-large {
    .uk-card-body {
      padding: @global-large-gutter;
    }
  }

}



//
// Desktop
//

@media (min-width: @breakpoint-large) {

  #logo {
    left:-48px;
    width:130px;
  }

  #first-header {
    //padding-left:105px;
  }

  #second-header {
    //padding-left:90px;
  }

  #first-content-box {
    margin-top:50px;
  }


}

//
// Large screens
//

@media (min-width: @breakpoint-xlarge) {


}

//
// XLarge screens
//

@media (min-width: 1600px) {



  #first-header {
    //padding-left:90px;
  }

  #second-header {
    //padding-left:75px;
  }

}


//
// Crossbrowser fallback
//

.is-explorer {
  // Empty
}

.is-explorer-11 {
  // Empty
}